<template>
	<view class="container">
		<view style="width: 100%;height: 28%;">
			<view style="width: 100%;height: 6%;"></view>
			<!-- 头像 -->
			<view style="width: 9vh;height: 9vh;border-radius: 50%;margin: 0 auto;margin-top: 60rpx;">
				<image :src="'http://101.43.223.224:8765/image/getImageById?id=' + memberUserInfo.memberUserPhoto" style="width: 9vh;height: 9vh;border-radius: 50%;"></image>
			</view>
			<view style="width: 100%;height: 6%;"></view>
			<view style="width: 80%;height: 10%;margin: 0 auto;text-align: center;">
				<span style="font-size: 18px;font-weight: 600;color: #333;">{{ memberUserInfo.memberUserName === null || memberUserInfo.memberUserName === "" ? memberUserInfo.memberUserRealName : memberUserInfo.memberUserName }}</span>
				<br/>   
				<span style="font-size: 18px;font-weight: 600;color: #333;">追云健身俱乐部</span>
			</view>
			<view style="width: 100%;height: 3%;"></view>
            <view style="white-space: pre-line;"></view>
			<!-- <view style="width: 80%;height: 10%;margin: 0 auto;text-align: center;">
				<span style="font-size: 16px;font-weight: 600;color: aliceblue;">{{memberUserInfo.venueName}}</span>
			</view> -->
			<!-- vip标识 -->
			<view style="width: 70%;height: 10%;"></view>
			<view style="width: 80%;height: 20%;margin: 0 auto;background-color: #3E3F40;border-radius: 20px; margin-top: -10rpx;border:2px solid  #fcdc26 ">
				<view style="width:20%;height: 25%;"></view>
				<view style="width: 10%;height: 50%;float: left;"></view>
				<view style="width: 7%;height: 50%;float: left;">
					<image src="@/static/vip.png" class="img1" mode=""></image>
				</view>
				<view style="width: 3%;height: 50%;float: left;"></view>
				<view style="width: 10%;height: 39%;float: left;padding-top: 1%;">
					<span style="color: rgba(252, 220, 38, 0.97);font-size: 23px;line-height: 90%;font-weight: 100;">VIP</span>
				</view>
				<view style="width: 5%;height: 50%;float: left;"></view>
				<view style="width: 3%;height: 39%;float: left;">
					<span style="color: rgba(240, 215, 132, 1);font-size: 26px;line-height: 90%;font-weight: 100;">|</span>
				</view>
				<view style="width: 1%;height: 50%;float: left;"></view>
				<view style="width: 30%;height: 39%;float: left;">
					<span style="color: rgba(252, 220, 38, 0.97);font-size: 15px;line-height: 90%;font-weight: 100;">定制专属健身</span>
				</view>
				<view style="width: 4%;height: 50%;float: left;"></view>
				<view style="width: 17%;height: 39%;float: left;">
					<span style="color: rgba(252, 220, 38, 0.97);font-size: 13px;line-height: 90%;font-weight: 100;width: 17%;">{{ memberUserInfo.memberType === '0' ? '次卡会员' : '年卡会员' }}</span>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 72%; margin-top: 50rpx;">
			<view style="width: 100%;height: 2%;"></view>
			<!-- 个人档案、我的预约、我的评论、意见反馈 -->
			<view style="width: 80%;height: 45%;margin: 0 auto;border: 1px solid aliceblue;border-radius: 6px;box-shadow: 0px 2px 10px #dfdfdf;background-color: rgba(255, 255, 255, 0.6); padding-bottom:50rpx;">
				<view style="width: 100%;height: 4%;"></view>
				<view class="div4">
					<span style="font-size: 28rpx;font-weight: 400;line-height: 6vh;padding-left: 11%;" @click="goToArchives">个人档案</span>
					<span style="font-size: 28rpx;font-weight: 400;line-height: 6vh;padding-left: 59%;color: #e3e3e3;" @click="goToArchives">></span>
				</view>
				<view style="width: 100%;height: 4%;"></view>
				<view class="div4">
					<span style="font-size: 28rpx;font-weight: 400;line-height: 6vh;padding-left: 11%;" @click="goToCourse">我的预约</span>
					<span style="font-size: 28rpx;font-weight: 400;line-height: 6vh;padding-left: 59%;color: #e3e3e3;" @click="goToCourse">></span>
				</view>
				<view style="width: 100%;height: 4%;"></view>
				<view class="div4">
					<span style="font-size: 28rpx;font-weight: 400;line-height: 6vh;padding-left: 11%;" @click="goToMyCoach">我的教练</span>
					<span style="font-size: 28rpx;font-weight: 400;line-height: 6vh;padding-left: 59%;color: #e3e3e3;" @click="goToMyCoach">></span>
				</view>
				<view style="width: 100%;height: 4%;"></view>
				<view class="div4">
					<span style="font-size: 28rpx;font-weight: 400;line-height: 6vh;padding-left: 11%;" @click="loginOut">退出登录</span>
					<span style="font-size: 28rpx;font-weight: 400;line-height: 6vh;padding-left: 59%;color: #e3e3e3;" @click="loginOut">></span>
				</view>
			</view>
			<view style="width: 100%;height: 45%;"></view>
		</view>
		<tabbar selected-index=2></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
				memberUserInfo:{}
			}
		},
		onLoad() {
			if(uni.getStorageSync('userInfo')){
				this.userInfo =uni.getStorageSync('userInfo')
			}
			this.getUserInformation()
		},
		methods: {
			//查询用户数据
			getUserInformation(){
				uni.request({
					url: 'http://127.0.0.1:17000/studentTraining/getUserInformation',
					data: {
						id: this.userInfo.id,
						venueUniqueIdentifier: this.userInfo.venueUniqueIdentifier
					},
					success: (res) => {
						this.memberUserInfo=res.data.data.data
						console.log(this.memberUserInfo)
					},
				})
			},
			goToMyCoach () {
				uni.navigateTo({
					url: '/pages/student/index/myTeacher',
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			},
			loginOut(){
				uni.reLaunch({
					url: '/pages/student/login/identity',
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			},
			goToCourse() {
			    uni.navigateTo({
			      url: '/pages/student/index/class',
				  animationType: 'slide-out-top',
				  animationDuration: 200
			    })
			},
			goToArchives() {
			    uni.navigateTo({
			      url: '/pages/student/index/Archives',
				  animationType: 'slide-out-top',
				  animationDuration: 200
			    })
			}
		}
	}
</script>

<style>
	/* 设置背景图片 */
	.container {
	  /* display: flex; */
	  justify-content: center;
	  align-items: center;
	  height: 100vh;
	  background-size: cover; /* 使背景图片覆盖整个页面 */
	  /* background: blue; */
	  /* background-size: cover; */
	}
	.div8{
		width: 9%;
		height: 100%;
		/* background-color: green; */
		float: left;
	}
	.div7{
		width: 100%;
		height: 50%;
		/* background-color: red; */
	}
	.div6{
		width: 100%;
		height: 50%;
	}
	.div5{
		width: 100%;
		height: 30%;
		/* background-color: yellow; */
	}
	.div4{
		width: 90%;
		height: 21%;
		margin: 0 auto;
		line-height:21%;
		border-bottom: 1px solid #e3e3e3;
		/* background-color: pink; */
	}
	.hd{
		overflow-x: auto;
	    display: -webkit-box;
	    -webkit-overflow-scrolling: touch;
	    margin: 0.5rem 0.5rem
	}
	.zx{
		overflow:auto;
	    /* display: -webkit-box; */
	    -webkit-overflow-scrolling: touch;
	    margin: 0.5rem 0.5rem
	}
	.div1{
		width: 100%;
		height: 90%;
		background: rgba(255, 255, 255, 1);
		border-radius: 100px 100px, 0px, 0px;
		border-top-left-radius: 40px;
		border-top-right-radius: 40px;
	}
	.img1{
		width: 100%;
		height: 100%;
	}
</style>